<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style type="text/css">
    .td {
      background-color: #B8D3F4;
      text-align: center;
      line-height: 20px;
      width: 100px;
      height: 280px;
      font-size: 18px;
      border: 2px groove #ffffff;
    }
    td {
      width: 150px;
      height: 280px;
    }
    .button {
      border: 1px solid grey;
      line-height: 18px;
      height: 25px;
      width: 65px;
      background: #CBDAF7;
      color: #000000;
      font-size: 18px;
      text-align: center;
      margin-top: 3px;
      margin-bottom: 3px;
    }
    div {
      margin:50px 0 0 50px;
      width:700px; height:520px;
    }
  </style>
  <script src="js/jquery-3.7.1.min.js"></script>
  <script type="text/javascript">
    $(function () {
      $("#add").click(function () {
        var $first_selected = $("#first option:selected");
        $first_selected.prop("selected",false);
        $("#second").append($first_selected);
      })
      $("#add_all").click(function () {
        var $first = $("#first option");
        $("#second").append($first);
        $first.prop("selected", false);
      })
      $("#remove").click(function () {
        var $second_selected = $("#second option:selected");
        $("#first").append($second_selected);
        $second_selected.prop("selected", false);
      })
      $("#remove_all").click(function () {
        var $second = $("#second option");
        $("#first").append($second);
        $second.prop("selected", false);
      })
      $("select option").click(function () {
        var $option = $(this);
        if ($option.hasClass("selected")){
          $option.removeClass("selected");
          $option.prop("selected", false);
        } else {
          $option.addClass("selected");
        }
      })
      $("#second option").dblclick(function () {
        var $selected = $(this);
        $("#first").append($selected);
        $selected.prop("selected", false);
      })
    })
  </script>
</head>
<body>
<div>
  <table width="285" height="169" border="0" align="left" cellpadding="0" cellspacing="0"
         style="margin:15px 0 0 15px;">
    <tr>
      <td>
        <!--multiple="multiple" 能同时选择多个   size="10"  确定下拉选的长度-->
        <select name="first" size="10" multiple="multiple" class="td" id="first">
          <option value="选项1">选项1</option>
          <option value="选项2">选项2</option>
          <option value="选项3">选项3</option>
          <option value="选项4">选项4</option>
          <option value="选项5">选项5</option>
          <option value="选项6">选项6</option>
          <option value="选项7">选项7</option>
          <option value="选项8">选项8</option>
        </select>
      </td>
      <td>
        <input name="add" id="add" type="button" class="button" value="-->"/>
        <input name="add_all" id="add_all" type="button" class="button" value="==>"/>
        <input name="remove" id="remove" type="button" class="button" value="&lt;--"/>
        <input name="remove_all" id="remove_all" type="button" class="button" value="&lt;=="/>
      </td>
      <td>
        <select name="second" size="10" multiple="multiple" class="td" id="second">
          <option value="选项9">选项9</option>
        </select>
      </td>
    </tr>
  </table>
</div>
</body>
</html>
